<template>
  <view class="menuPage">
    <!-- 底部标题 -->
    <view
      class="footTitle"
      :class="[
				vodIndex == index
					? sliderDrag
						? 'vodMenu-bright1'
						: moveOpacity
						? 'vodMenu-bright2'
						: 'vodMenu-bright0'
					: '',
			]"
    >
      <!-- 店铺卡片 -->
      <view
        v-if="item.store?.id"
        class="card_info"
        @click="go(item.platform, item.store.link)"
      >
        <div class="content">
          <image
            class="shop_img"
            src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250328/60b1f3aafc947ec0881c039b7c1ad791.png"
            mode="widthFix"
          />

          <text class="shop_name">{{ item.store.title }}</text>
        </div>

        <div class="tips">天天低价·优惠，点击进入！ </div>
      </view>

      <!--商品卡 -->
      <view
        v-if="item.goods?.id"
        class="card_info"
        @click="go(item.platform, item.goods.link)"
      >
        <div class="content">
          <image
            class="shop_img"
            src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250328/58340def96b1f6f46ea0bd2606d2a362.png"
            mode="widthFix"
          />
          <text class="shop_name">购物 | {{ item.goods.title }}</text>
        </div>
        <div class="tips">天天低价·优惠，点击进入！ </div>
      </view>

      <view><text
          class="foot-name"
          @click="JumpBtn(1)"
        >@{{ item.user?.nickname }}</text></view>

      <view><text class="foot-cont">{{ item.title }}</text></view>
    </view>

    <!-- 右侧操作栏 -->
    <view class="menuBox">
      <view
        class="vodMenu"
        :class="[
					vodIndex == index
						? sliderDrag
							? 'vodMenu-bright1'
							: moveOpacity
							? 'vodMenu-bright2'
							: 'vodMenu-bright0'
						: '',
				]"
      >
        <!-- 头像 -->
        <view class="menu-avatar">
          <image
            class="avatar-image"
            :src="
							item.user && item.user.avatar
								? item.user.avatar
								: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/e7a91c64184dcd5646b290bf14be3b86.png'
						"
            mode="aspectFill"
            @click="JumpBtn(1)"
          />
          <view
            class="follow"
            @click="JumpBtn(0)"
            v-if="!item.followReally && !item.is_me"
            :class="{ followHide: followShow == 2 }"
          >
            <image
              src="@/association/pages/static/icon/gou.png"
              mode=""
              class="follow-guanzhu guanzhu-gou"
              v-if="followShow == 1 || followShow == 2"
            ></image>
            <image
              src="@/association/pages/static/icon/guanzhu.png"
              mode=""
              class="follow-guanzhu"
              v-if="followShow == null || followShow == 0"
              :class="{ followActive: followShow == 0 }"
            >
            </image>
          </view>
        </view>
        <!-- 点赞 -->
        <view
          class="fabulous"
          @click="JumpBtn(2)"
        >
          <view
            class="fabulous-image"
            :class="likeeMeans"
            style="position: relative"
          >
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250331/65ad01b625c3b66831375326c9f150b2.png"
              mode="widthFix"
              class="fabulous-image"
              v-if="item.fabulousShow"
            ></image>
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250331/b4d896e76796f85baf7bd58ab5947ca7.png"
              mode="widthFix"
              class="fabulous-image"
              v-else
            >
            </image>
            <view
              class="like-pellet"
              :class="[likeeffect ? 'like-pellet-active' : '']"
            ></view>
          </view>
          <view class="fabulous-num">{{
						item.likes === 0 ? '点赞' : formatCharCount(item.likes)
					}}</view>
        </view>
        <!-- 评论 -->
        <view
          class="fabulous"
          style="margin-top: 30rpx"
          @click="JumpBtn(3)"
        >
          <view class="fabulous-image">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250331/694c189fbfcb5ac95878a9f2198da9c9.png"
              mode="widthFix"
              class="fabulous-image"
            ></image>
          </view>
          <!-- <view class="fabulous-num">{{ item.collection_num === 0 ? '评论' : formatCharCount(item.collection_num) }}</view> -->
          <view class="fabulous-num">{{
						association.commonTootalNum === 0
							? '评论'
							: formatCharCount(association.commonTootalNum)
					}}</view>
        </view>
        <!-- 收藏 -->
        <view
          class="fabulous"
          style="margin-top: 30rpx"
          @click="JumpBtn(4)"
        >
          <view class="fabulous-image">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250331/0301807e7e5418fb6f8a4871594fe2e6.png"
              v-if="item?.is_collection"
              class="fabulous-image"
            ></image>
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250331/2eb42e6c20b2a42958dcdea79001576b.png"
              v-else
              class="fabulous-image"
            ></image>
          </view>
          <view class="fabulous-num">{{
						item.collections === 0 ? '收藏' : formatCharCount(item.collections)
					}}</view>
        </view>
        <!-- 转发 -->
        <view
          class="ss-reset-button fabulous"
          style="margin-top: 30rpx"
          @click="show_share"
          v-if="item.is_me == 0"
        >
          <view class="fabulous-image">
            <image
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250331/a1846898531ee1ae94fc0276f8b967d0.png"
              mode=""
              class="fabulous-image"
            ></image>
          </view>
          <!-- <view class="fabulous-num">{{item.forward === 0 ? '分享' : formatCharCount(item.forward)}}</view> -->
          <view class="fabulous-num">分享</view>
        </view>
        <!-- 更多 -->
        <button
          class="ss-reset-button fabulous"
          style="margin-top: 30rpx"
          @click="show_more_share"
          v-else
        >
          <view class="fabulous-image">
            <image
              src="@/association/pages/static/icon/more.png"
              mode=""
              class="fabulous-image"
            ></image>
          </view>
          <!-- <view class="fabulous-num">{{item.forward === 0 ? '分享' : formatCharCount(item.forward)}}</view> -->
          <view class="fabulous-more">更多</view>
        </button>
      </view>
    </view>

    <!-- 旋转头像 -->
    <view
      class="avatarMenu"
      v-if="item.rotateImgShow"
      :class="[
				vodIndex == index
					? sliderDrag
						? 'vodMenu-bright1'
						: moveOpacity
						? 'vodMenu-bright2'
						: 'vodMenu-bright0'
					: '',
			]"
    >
      <view
        class="rotate-avatar k-paused"
        :class="[item.vodPaly && palyCartoon ? 'k-running' : '']"
        @click="JumpBtn(6)"
      >
        <image
          :src="
						item.user && item.user.avatar
							? item.user.avatar
							: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/e7a91c64184dcd5646b290bf14be3b86.png'
					"
          mode=""
          class="rotate-image"
        ></image>
      </view>
    </view>
    <!-- 更多的弹窗 -->
    <optionPopup
      :item="item"
      :show="moreOption.show_popup"
      @close="close_moreOption_popup"
      @shear_show="shear_show"
      @removeClim="removeClim"
    ></optionPopup>
    <!--分享弹窗 -->
    <popupShare
      v-model:show="state.show_popup"
      :findId="item.find_id"
    ></popupShare>
    <!-- 评论弹窗 -->
    <commentPopup ref="commentPopup"></commentPopup>
    <sAuthModal :radioShow="true"></sAuthModal>
  </view>
</template>

<script>
import sheep from '@/sheep';
import API from '@/association/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formatCharCount, cdnUrl } from '@/association/utils';
import association from '@/association/store';
import suPopup from '@/sheep/ui/su-popup/su-popup.vue';
import commentPopup from './component/commentPopup.vue';
import { platform } from '../../../../config';
import optionPopup from './component/optionPopup.vue';
import sharePopup from './component/sharePopup.vue';
import popupShare from '../../../components/popup-share.vue';
import { showAuthModal } from '@/sheep/hooks/useModal';
import sAuthModal from '@/sheep/components/s-auth-modal/s-auth-modal.vue';
export default {
  components: { suPopup, commentPopup, optionPopup, sharePopup, popupShare, sAuthModal },
  props: {
    //下标索引
    index: {
      type: Number,
      default: 0,
    },
    //当前swiper的下标
    vodIndex: {
      type: Number,
      default: 0,
    },
    //当前播放的视频下标
    vodCurIndex: {
      type: Number,
      default: 0,
    },
    //当前视频的整个对象
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //数据总数
    discussNum: {
      type: Number,
      default: 0,
    },
    //是否在拖动进度
    sliderDrag: {
      type: Boolean,
      default: false,
    },
    //是否透明
    moveOpacity: {
      type: Boolean,
      default: false,
    },
    //是否播放旋转头像
    palyCartoon: {
      type: Boolean,
      default: false,
    },
  },

  data () {
    return {
      searchKeyword: '',
      currentTab: 0, // 当前选中的tab
      tabList: ['好友', '群聊', '商家群', '商务BD'], // 分类标签列表
      type: '好友',
      page: 1,
      has_more: true,

      fabulousShow: false,
      followShow: null,
      followOpen: false,
      fabuTimeOut: null,
      likeeffect: null, //点赞动效判断

      user_id: '',
      list: [],
      share_info: {},
      state: {
        show_popup: false,
        invite_code: '',
      },
      moreOption: {
        show_popup: false,
      },
      removeOption: {
        clim_popup: false,
      },
      association: association(),
      tootalNum: 0,
      showShare: false,
    };
  },

  mounted () {
    // 获取用户id
    let user_info = uni.getStorageSync('user-store');
    if (user_info) {
      user_info = JSON.parse(user_info);
      if (user_info.userInfo && user_info.userInfo?.id) {
        this.user_id = user_info.userInfo.id;
        // this.get_share_list();
      }
    }
  },

  onLoad (e) {
    if (e.invite_code) {
      let invite_code = e.invite_code;
      uni.setStorageSync('invite_code', invite_code);
    }
  },
  onUnload () {
    uni.$off('commentSet');
  },

  computed: {
    likeeMeans () {
      return this.likeeffect == true
        ? 'fabulous-taoxin'
        : this.likeeffect == false
          ? 'cancel-taoxin'
          : '';
    },
    isLogin () {
      return association().isLogin();
    },
  },
  watch: {
    // 列表索引
    index: {
      handler (newVal) {
        console.log('监听分享列表的变化', newVal);

        // this.list = newVal.friends;
      },
      immediate: true,
    },
  },

  methods: {
    // 滑动视频执行
    closePopup () {
      // 关闭分享弹窗
      this.close_share_popup();
      // 关闭更多弹窗
      this.close_moreOption_popup();
      // 关闭转发弹窗
      this.showShare = false;
      // 关闭删除弹窗
      // this.close_remove_popup();
    },
    get_share () {
      this.get_share_list();
      //获取邀请码
      sheep.$api.tuangou.showLoadingGetUserQrCode().then((res) => {
        if (res.error == 0) {
          this.state.invite_code = res.data.invite_code;
        }
      });
    },

    removeClim (item) {
      this.$emit('removeList', item);
      // 删除成功后刷新一下广场列表
      uni.$emit('refreshData');
    },
    setNum (id) {
      if (this.item.find_id == id) {
        this.item.collection_num += 1;
      }
    },
    // 分享给朋友的回调
    onShareAppMessage () {
      return {
        title: '分享好友',
        path: `/pages/index/home?user_id=${this.user_id}&invite_code=${this.state.invite_code}`,
        imageUrl:
          'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/67eaf80805de0e0d23b6011970091ae7.png',
      };
    },

    // 显示分享弹窗
    show_share () {
      if (!association().isLogin()) {
        sheep.$store('modal').$patch((state) => {
          state.auth = 'accountLogin';
        });
        return;
      }
      this.get_share();
      this.state.show_popup = true;
    },
    // 显示更多弹窗
    show_more_share () {
      if (!association().isLogin()) {
        sheep.$store('modal').$patch((state) => {
          state.auth = 'accountLogin';
        });
        return;
      }
      this.moreOption.show_popup = true;
    },

    // 关闭分享弹窗
    close_share_popup () {
      this.state.show_popup = false;
    },
    // 关闭更多弹窗
    close_moreOption_popup () {
      this.moreOption.show_popup = false;
    },
    // 朋友圈分享
    handle_moments_share () {
      // 朋友圈分享逻辑
      uni.showToast({
        title: '请点击右上角分享朋友圈',
        icon: 'none',
      });
      this.close_share_popup();
    },

    go (current_platform, link) {
      if (platform == current_platform) {
        uni.navigateTo({
          url: link,
        });
      } else if (current_platform == 'xyh') {
        // 跳转到其他小程序
        uni.navigateToMiniProgram({
          appId: 'wx9c2f225a48721855',
          path: link,
          success (res) {
            console.log('跳转成功');
          },
          fail (err) {
            console.log('跳转失败', err);
          },
        });
      } else if (current_platform == 'hotel') {
        // 跳转到其他小程序
        uni.navigateToMiniProgram({
          appId: '：wx600ec167b7385d89',
          path: link,
          success (res) {
            console.log('跳转成功');
          },
          fail (err) {
            console.log('跳转失败', err);
          },
        });
      }
    },

    shend_share (item) {
      let params;

      if (this.currentTab == 0) {
        params = {
          pattern: 'msg',
          group_id: '',
          to_account: item.id,
          find_id: this.item.find_id,
        };
      } else if (this.currentTab == 1) {
        params = {
          pattern: 'group',
          group_id: item.id,
          to_account: '',
          find_id: this.item.find_id,
        };
      } else if (this.currentTab == 2) {
        params = {
          pattern: 'group',
          group_id: item.id,
          to_account: '',
          find_id: this.item.find_id,
        };
      } else if (this.currentTab == 3) {
        params = {
          pattern: 'group',
          group_id: item.id,
          to_account: '',
          find_id: this.item.find_id,
        };
      }

      uni.showLoading({
        title: '发送中...',
        mask: true,
      });

      API.send_share(params)
        .then((res) => {
          uni.hideLoading();
          if (res.code == 1) {
            setTimeout(() => {
              uni.showModal({
                title: '提示',
                content: '发送成功',
                cancelText: '继续分享',
                confirmText: '前往聊天',
                success: async (res) => {
                  if (res.confirm) {
                    if (this.currentTab == 0) {
                      let to = {
                        aim: 'message',
                        service: {
                          mobile: item.mobile,
                        },
                      };
                      const urlJson = encodeURIComponent(
                        JSON.stringify(to),
                      );
                      uni.navigateTo({
                        url: '/im/pages/web?to=' + urlJson,
                      });
                    } else {
                      let to = {
                        aim: 'groupMessage',
                        service: {
                          mobile: `GROUP${item.id}`,
                        },
                      };
                      const urlJson = encodeURIComponent(
                        JSON.stringify(to),
                      );
                      uni.navigateTo({
                        url: '/im/pages/web?to=' + urlJson,
                      });
                    }
                  } else if (res.cancel) {
                    console.log('用户点击了取消按钮，什么都不做');
                  }
                },
              });
            }, 200);
          }
        })
        .catch((err) => {
          // 发生错误时也要隐藏loading
          uni.hideLoading();
          uni.showToast({
            title: '发送失败',
            icon: 'error',
          });
        });
    },

    // 获取分享列表
    get_share_list () {
      API.shareList({
        search: this.searchKeyword,
        type: this.tabList[this.currentTab],
        page: this.page,
        list_rows: 100,
      }).then((res) => {
        if (res.data.data.current_page == res.data.data.last_page) {
          this.has_more = false;
        }
        this.list = res.data.data.data;
      });
    },

    load_more () {
      if (this.has_more) {
        this.page++;
        this.get_share_list();
      }
    },

    switchTab (index) {
      this.has_more = true;
      this.currentTab = index;
      this.get_share_list();
      // 这里可以根据tab切换加载不同的数据
    },

    shear_show (type) {
      if (type == 'share') {
        this.close_share_popup();
        if (!sheep.$store('user').isLogin) {
          showAuthModal();
          return;
        }
        this.showShare = true;
      }
      if (type == 'more') {
        this.close_moreOption_popup();
        this.state.show_popup = true;
        this.get_share();
      }
    },

    cdnUrl,
    formatCharCount,
    /* 视频点赞动效 */
    fabulousBtn () {
      if (this.item.coverOpacity) return;
      let obj = Object.assign({}, this.item);
      obj.fabulousShow = !obj.fabulousShow;
      obj.is_likes = !obj.is_likes;
      this.likeeffect = obj.fabulousShow;
      obj.likes = obj.is_likes ? obj.likes + 1 : obj.likes - 1;
      let list = association()[`${association().goType}List`];
      list.forEach((item, index) => {
        if (item.id == obj.id) {
          item.is_likes = obj.is_likes
          item.likes = obj.likes
        }
      });
      association()[`${association().goType}List`] = list
      this.$emit('handleInfo', obj); //点赞成功

      /* clearTimeout(this.fabuTimeOut)
            this.fabuTimeOut = setTimeout(()=>{
              console.log('发送请求')
            },300) */
    },
    // 评论
    commonToo () {
      let obj = Object.assign({}, this.item);
      this.$emit('handleInfo', obj);
    },
    /* 关注动效 */
    followBtn (index) {
      if (this.followOpen) return;
      this.followOpen = true;
      let obj = Object.assign({}, this.item);
      obj.followReally = true;
      this.followShow = 0;
      setTimeout(() => {
        this.followShow = 1;
        setTimeout(() => {
          this.followShow = 2;
          setTimeout(() => {
            this.followOpen = false;
            this.followShow = null;
            this.$emit('handleInfo', obj); //关注成功
          }, 300);
        }, 100);
      }, 500);
    },
    // 关闭评论弹窗
    closeCommentPopup () {
      this.$refs.commentPopup.close();
    },
    /* 点击右侧菜单选项 1头像 2点赞 3评论 4转发 5旋转头像 */
    JumpBtn (index) {
      const arrList = [0, 2, 3, 4];
      if (!association().isLogin() && arrList.includes(index)) {
        sheep.$store('modal').$patch((state) => {
          state.auth = 'accountLogin';
        });
        return
      }
      switch (index) {
        case 0:
          this.$emit('event', this.item, 'follow', this.followBtn);
          break;
        case 1:
          this.$emit('event', this.item, 'avatar');
          break;
        case 2:
          this.$emit('event', this.item, 'like', this.fabulousBtn);
          break;
        case 3:
          this.$refs.commentPopup.open('bottom', {
            ...this.item,
            vodIndex: this.vodIndex,
            vodCurIndex: this.vodCurIndex,
            commonTootalNum: this.association.commonTootalNum,
          });
          break;
        case 4:
          this.$emit('event', this.item, 'collect', this.collect);
          break;
        case 5:
          this.$emit('event', this.item, 'share');
          break;
        case 6:
          this.$emit('avatarPause', this.index);
          break;
      }
    },
    collect () {
      let obj = Object.assign({}, this.item);
      obj.is_collection = obj.is_collection == 0 ? 1 : 0;
      obj.collections = obj.is_collection ? obj.collections + 1 : obj.collections - 1;

      this.$emit('handleInfo', obj);
    },
  },
};
</script>

<style lang="less" scoped>
image {
  display: block;
  width: 100%;
  height: 100%;
}

.share_popup {
  background-color: #fff;
  height: 80vh;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx 30rpx 0 30rpx;
  display: flex;
  flex-direction: column;
  position: relative;

  // 取消
  .cancel_btn {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    border-top: 1rpx solid #eeeeee;
  }

  // 搜索框样式
  .search-box {
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row; // 水平方向布局
    padding: 0 20rpx;
    .search-input {
      flex: 1;
      background-color: #f5f5f5;
      height: 70rpx;
      border-radius: 35rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
    }
  }

  // 分类标签栏
  .tab-bar {
    display: flex;
    flex-direction: row; // 水平方向布局
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eeeeee;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666;
      position: relative;

      &.active {
        color: #333;
        font-weight: bold;
      }
    }
  }

  // 好友列表
  .friend-list {
    flex: 1;
    height: calc(100% - 200rpx);
    overflow-y: auto;
    display: flex;
    flex-direction: column; // 垂直方向布局

    .no_more {
      text-align: center;
      font-size: 24rpx;
      color: #999;
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .friend-item {
      display: flex;
      flex-direction: row; // 水平方向布局
      align-items: center;
      padding: 20rpx 0;

      .friend-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 10rpx;
      }

      .friend-info {
        flex: 1;
        padding: 0 20rpx;

        .friend-name {
          font-size: 28rpx;
          color: #333;
        }
      }

      .send-btn {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background-color: #07c160;
        color: #fff;
        font-size: 28rpx;
        border-radius: 30rpx;
        padding: 0;
      }
    }
  }

  // 取消按钮
  .cancel-btn {
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    margin-top: 20rpx;
    border-top: 1rpx solid #eeeeee;
    background: #fff;
  }
}

.menuPage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 右边菜单栏 */
.menuBox {
  position: absolute;
  right: 10rpx;
  bottom: 280rpx;
  width: 115rpx;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  // border: 1rpx solid #eee;
}

.avatarMenu {
  position: absolute;
  bottom: 120rpx;
  right: 10rpx;
  width: 115rpx;
  z-index: 8;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.vodMenu {
  width: 115rpx;
  /* bottom: 400rpx; */
  display: flex;
  align-items: center;
  flex-direction: column;
}

.vodMenu-bright0 {
  opacity: 1;
  transition: all 0.3s linear;
}

.vodMenu-bright1 {
  opacity: 0;
  transition: all 0.3s linear;
}

.vodMenu-bright2 {
  opacity: 0.2;
  transition: all 0.3s linear;
}

.menu-avatar {
  position: relative;
  margin-bottom: 80rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-image {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}

.follow {
  position: absolute;
  bottom: -20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow:active {
  transform: scale(0.7);
  transition: all 0.3s linear;
}

.follow-guanzhu {
  width: 40rpx;
  height: 40rpx;
}

.guanzhu-gou {
  width: 30rpx;
  height: 30rpx;
}

.followActive {
  transform: rotate(180deg);
  transition: all 0.5s linear;
}

.followHide {
  transform: scale(0);
  transition: all 0.8s linear;
}

.fabulous {
  display: flex;
  align-items: center;
  flex-direction: column;
  // border: 1rpx solid red;
}

.fabulous-image {
  width: 60rpx;
  height: 60rpx;
  // border: 1rpx solid red;
}

.fabulous-num {
  width: 100rpx;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  margin-top: 8rpx;
  //
  // border: 1rpx solid red;
}

.fabulous-more {
  width: 100rpx;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  margin-top: -10rpx;
}

.rotate-avatar {
  width: 95rpx;
  height: 95rpx;
  border-radius: 95rpx;
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateName 5s linear infinite;
}

.rotate-image {
  width: 55rpx;
  height: 55rpx;
  border-radius: 55rpx;
}

@keyframes rotateName {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.like-pellet {
  width: 5rpx;
  height: 5rpx;
  background-color: transparent;
  border-radius: 50%;
  /* 绝对定位 居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  /* 设置各个方向的阴影 */
  box-shadow: 0 -45rpx 0 #ff0000, 0 48rpx 0 #ff0000, -50rpx 0 0 #ff0000, 50rpx 0 0 #ff0000,
    -35rpx -35rpx 0 #ff0000, 35rpx -35rpx 0 #ff0000, 35rpx 35rpx 0 #ff0000, -35rpx 35rpx 0 #ff0000;
}

.like-pellet-active {
  animation: likeBlink 0.5s ease-in-out forwards;
}

/* 小圆点闪出的动画 */
@keyframes likeBlink {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

/* 底部标题部分 */
.footTitle {
  position: absolute;
  bottom: 120rpx;
  left: 0;
  z-index: 8;
  width: auto;
  margin-left: 30rpx;
  max-width: 500rpx;

  .card_info {
    background-color: rgba(41, 41, 41, 0.34);
    border-radius: 10rpx;
    margin-bottom: 15px;
    padding: 12rpx 10rpx 10rpx 12rpx;
    width: fit-content;
    max-width: 500rpx;

    .content {
      display: inline-flex;
      align-items: center;
      flex-direction: row;

      .shop_img {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }

      .shop_name {
        display: inline-block;
        font-size: 15px;
        color: #ffffff;
        margin-left: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 500rpx;
      }
    }

    .tips {
      margin-top: 5rpx;
      color: #fff;
      font-size: 20rpx;
      text-indent: 50rpx;
    }
  }
}

.foot-name {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 15rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foot-cont {
  font-size: 28rpx;
  color: #ffffff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foot-primary {
  margin-top: 10rpx;
  font-size: 25rpx;
  color: #ffffff;
}

.k-paused {
  animation-play-state: paused;
}

.k-running {
  animation-play-state: running;
}

.fabulous-taoxin {
  animation: likeName 0.5s linear 1;
}

@keyframes likeName {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(0);
  }

  30% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.2);
  }

  80% {
    transform: scale(1);
  }

  90% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.cancel-taoxin {
  animation: likeCancel 0.2s linear 1;
}

@keyframes likeCancel {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.7);
  }

  100% {
    transform: scale(1);
  }
}
.share-popup {
  padding: 30rpx;
  background-color: #fff;

  .share-popup__content {
    display: flex;
    flex-direction: row;
  }

  &__title {
    font-size: 32rpx;
    text-align: center;
    color: #333;
    margin-bottom: 40rpx;
  }

  &__content {
    padding: 20rpx 0;
  }

  &__cancel {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    border-top: 1rpx solid #eee;
  }

  .share-item {
    padding: 10rpx;

    .share-button {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      line-height: normal;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &::after {
        border: none;
      }
    }

    .share-icon {
      width: 70rpx;
      height: 70rpx;
      margin-bottom: 20rpx;
    }

    .wechat-icon {
      // background-color: #07c160; // 微信绿色
    }
    .qrcode-icon {
      // background-color: #1e90ff; // 二维码蓝色
    }

    .share-text {
      font-size: 28rpx;
      color: #333;
      margin-top: 10rpx;
    }
  }
}
</style>
